<template>
	<u-skeleton rows="4" :loading="loading" :title="false"  :rowsWidth="[700,700,700,700]" :rowsHeight="[200,290,320,400]">
		<view class="main">
			<view class="kind">
				<view class="best" @click="choose=0" style="transition: all 0.2s ease-in;" :style="{borderBottom: choose==0 ? '7upx solid rgba(14,176,201,1)' : ''}">
					最热
				</view>
				<view class="lastest" @click="choose=1" style="transition: all 0.2s ease-in;" :style="{borderBottom: choose==1 ? '7upx solid rgba(14,176,201,1)' : ''}"> 
					最新
				</view>
			</view>
			
			<view class="pages" :style="{height: cardHeight*0.93+'px', width: cardWidth+'px',top: cardHeight*0.07+'px'}">
				<u-skeleton rows="4" :loading="pageLoading" :title="false"  :rowsWidth="[120,700,230,700]" :rowsHeight="[80,260,80,350]">
					<view class="activities" style="transition: all 0.3s ease-in;">
						<view v-for="(item, index) in list" :key="index"
							  @click="seeDetail(item)"
							  class="ever"
							  
							  :class="Math.floor(index/2)%2==0
												? (index%2==0?'card1':'card2')
												: (index%2==0?'card2 move2':'card1 move1')">
							<view class="image">
								<image :src="item.activityCover" mode="aspectFill"></image>
							</view>
							<view class="activityInfo" 
								  :style="{bottom: Math.floor(index/2)%2==0
												? (index%2==0?'190upx':'140upx')
												: (index%2==0?'140upx':'190upx')}">
								<view class="title">
									{{item.activityTitle}}
								</view>
								<view class="timeRange" :style="{top: Math.floor(index/2)%2==0
															? (index%2==0?'78upx':'68upx')
															: (index%2==0?'68upx':'78upx')}">
									{{item.start}} 至 {{item.end}}
								</view>
									<view class="status" :style="{top: Math.floor(index/2)%2==0
																? (index%2==0?'-350upx':'-400upx')
																: (index%2==0?'-400upx':'-350upx')}">
										{{item.status}}
									</view>
									<view class="provider">
										<u-avatar :src="item.avatar" :size="44" style="border: 2upx solid white;"></u-avatar>
										<view class="nickname">{{item.createBy}}</view>
									</view>
							</view>
						</view>
						<view class="seeMore">
							<u-loadmore 
								:fontSize="24"
								color="#c7c7c7"
								:iconSize="26"
								:status="loadStatus" 
								@loadmore="getMore"
								loading-text="正在获取" 
								loadmore-text="查看更多" 
								nomore-text="没有更多了" 
								lineColor="#dfdfdf"
								:dashed="false"
								line
							/>
						</view>
					</view>
				</u-skeleton>
				
				<uni-popup :show="openDetail" ref="activityDetail" :is-mask-click="true" @maskClick="closeDetail">
					<view class="activityDetail" :style="{width:cardWidth*0.9+'px', height: cardHeight+'px'}" >
						<u-skeleton :loading="detailLoading" :rows="4" :title="false" :rowsWidth="[cardWidth*1.6, cardWidth, cardWidth*1.6, cardWidth*1.6]" :rowsHeight="[cardHeight, cardHeight*0.2, cardHidth, cardHeight*0.5]">
							<view class="wholeCover" :style="{height: cardHeight*0.5+'px', width: cardWidth*0.9+'px', backgroundImage: `url(${activityDetail.cover})` ,backgroundSize: 'cover',backgroundPosition: 'center'}">
								<view style="	position: absolute;
												top: 20px;
												right: 30px;
												border-radius: 10rpx;
												display: flex;
												justify-content: center;
												align-items: center;
												width: 90upx;
												height: 35upx;
												padding: 10upx;
												font-size: 0.8rem;
												box-shadow: 2upx 4upx 10upx rgba(0,0,0,0.3);
												font-weight: 600;
												letter-spacing: 2upx;
												background-color: white;
												color: black;">
									{{activityDetail.status}}
								</view>
								
								<view class="mask"  :style="{top: cardHeight*0.3+'px'}"
													style="	position: relative;
															height: 40%;
															width: 100%;
															backdrop-filter: blur(5 upx);
															background-image: linear-gradient(to top, rgba(71, 71, 71, 1),  rgba(71, 71, 71, 0.6),rgba(116, 116, 116, 0));">
									<view class="scale" :style="{top: cardHeight*0.15+'px', left: cardWidth*0.05+'px'}">
										<span>名额限制: &nbsp;</span>
										{{activityDetail.joinCount}}/{{activityDetail.scale}}
									</view>
								</view>
							</view>
							<view class="header">
								{{activityDetail.title}}
							</view>
							<view class="createBy" @click="seeHome(activityDetail.createBy.id)">
									<u-avatar :src="activityDetail.createBy.avatar" :size="44" style="border: 2upx solid white;"></u-avatar>
									<view class="name">{{activityDetail.createBy.nickname}}</view>
							</view>
							<view class="introduce">
								<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(82,82,136);">活动介绍: </span> <br/>
								<view style="padding: 10upx 30upx 10upx 30upx;">
									{{activityDetail.text}}
								</view>
<!-- 								<u-read-more ref="readMore" :fontSize="30" :toggle="true" :showHeight="200" style="width: 90%; margin: 10upx auto">
									<rich-text :nodes="activityDetail.text"></rich-text>
								</u-read-more> -->
							</view>
							<view class="otherInfo" style="margin-top: 20upx;">
								<table>
									<tr>
										<td style="font-weight: bold;display: block;padding-left: 20upx; border-left: 10upx solid rgb(86,152,195); margin-bottom: 10upx;">开始时间: &nbsp;</td>
										<td>{{activityDetail.start}}</td>
									</tr>
									<tr>
										<td style="font-weight: bold;display: block;padding-left: 20upx; border-left: 10upx solid rgb(86,152,195);">结束时间: &nbsp;</td>
										<td>{{activityDetail.end}}</td>
									</tr>
									<tr style=" position: relative; top: 20upx;">
										<td style="font-weight: bold;display: block;padding-left: 20upx; border-left: 10upx solid rgb(241,202,23);">活动地点: &nbsp;</td>
										<td>{{activityDetail.geo}}</td>
									</tr>
									<tr style=" position: relative; top: 20upx;">
										<td style="font-weight: bold;display: block;padding-left: 20upx; border-left: 10upx solid rgb(241,202,23);">活动负责人: &nbsp;</td>
										<td>{{activityDetail.nickname}}</td>
									</tr>
									
									<tr style=" position: relative; top: 40upx;">
										<td style="font-weight: bold;display: block;padding-left: 20upx; border-left: 10upx solid rgb(92,179,204);">活动群: &nbsp;&nbsp;</td>
										<td>{{activityDetail.gruop}}</td>
									</tr>
								</table>
								<view class="care">
									<span style="font-weight: bold; margin-left: 2upx;display: block;padding-left: 20upx; border-left: 10upx solid rgb(236,43,36);">注意事项:</span>
									<view style="width: 90%; margin: 10upx auto;">
										{{activityDetail.summary}}
									</view>
								</view>
							</view>
						</u-skeleton>
					</view>
					<view class="footer" :style="{top: cardHeight+'px'}">
						<view class="join" @click="join(activityDetail.id)" style="background-color: rgba(235, 170, 6, 0.5);color: rgba(255, 255, 255, 1.0);">
							{{joinStatus}}
						</view>
						<view class="contact" style="border-left: 1upx solid rgba(19,72,87,0.1);" @click="contact(activityDetail)">
							联系负责人
						</view>
					</view>
				</uni-popup>
				
			</view>
		</view>
	</u-skeleton>
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		props:{
			cardWidth:{
				type: Number,
				default:0,
				required: true
			},
			cardHeight:{
				type: Number,
				default:0,
				required: true
			}
		},
		data(){
			return {
				loading: false,
				detailLoading: false,
				pageLoading: false,
				choose:0,
				cardOne: this.cardWidth*0.93*0.4,
				loadStatus: 'loadmore', // 'loadmore' | 'loading' | 'nomore'
				hasMore:true,
				page: 1,
				pageSize: 12,
				openDetail:true,
				timeUtil: new Date(),
				activityDetail:{
					id: undefined,
					summary: '',
					title: '',
					start: '',
					end: '',
					scale: undefined, //活动人员容量
					has: 20,
					text: '', //介绍内容
					geo: '明理楼C1006',
					join: false,
					cover: '',
					gruop: '20202220',
					status: '', // 报名中 | 已结束 | 进行中
					joinCount: 20,
					createBy:{
						id: '',
						userName: '',
						nickname: '',
						avatar: '',
						school: '',
						introduce: ''
					}
				}
			}
		},
		methods:{
			getMore(){
				if(this.hasMore){
					this.loadStatus = 'loading',
					uni.request({
						url:`http://162.14.102.246:8090/activity/front/${this.page}/${this.pageSize}`,
						method:'POST',
						header:{
							xdzn_token: this.$store.state.loginUser.token
						},
						data:{
							
							  key: "",
							  start: "",
							  end: "",
							  scale: 0,
							  tagList: [
							    {
							      id: "",
							      tagName: "",
							      tagDescription: ""
							    }
							  ]
						}
					}).then(res => {
						//console.log(res)
						let data = res.data.data.list;
						//console.log(data[0].start.substring(5,16).replace('T',' '))
						if(data.length){
							data.forEach((item) => {
								//console.log('item.start',item.start)
								let flag = this.$store.state.allActivities.find(obj => obj.id == item.id)
								if(flag === undefined){
									if(item.start){
										let s = item.start.replace(/[\:T\-]/g,'').replace(' ','')
										let e = item.end.replace(/[\:T\-]/g,'').replace(' ','')
										item['status'] = this.compareTime(s,e,item.id)
										item.start = item.start.substring(0,10)
										item.end = item.end.substring(0,10)
									}
									if(item.start){
										item['beginTime'] = parseInt(item.start.substring(6,11).replace(':',''))
									}
									this.$store.state.allActivities.push(item)
								}
							})
							this.loadStatus = 'loadmore'
							this.page++
						}else{
							this.loadStatus = 'nomore'
							this.hasMore = false
						}
					})
				}else{
					this.loadStatus = 'nomore'
				}
			},
			//获取活动状态
			compareTime(start, end, id){
				let flag = this.$store.state.loginUser.userOtherInfo.activities.find(obj => obj.id == id)
				if(flag !== undefined){return '已报名'}
				let startDate = start.substring(0,8)
				let endDate = end.substring(0,8)
				let nowMonth = this.timeUtil.getMonth()<10 ? '0'+this.timeUtil.getMonth() : this.timeUtil.getMonth()+''
				let nowDate = this.timeUtil.getDate()<10 ? '0'+this.timeUtil.getDate() : this.timeUtil.getDate()+''
				
				let now = parseInt(this.timeUtil.getFullYear()+nowMonth+nowDate)
				if(now < startDate){
					return '报名中'
				}else if(now > endDate){
					return '已结束'
				}else if(now == startDate){
					let nowTime = parseInt(this.timeUtil.toTimeString().replace(/\:/g,'').substring(0,6))
					let startTime = parseInt(start.substring(8,14))
					if(nowTime < startTime){return '报名中'}
					else{return '进行中'}
				}else if(nowDate == endDate){
					let nowTime = parseInt(this.timeUtil.toTimeString().replace(/\:/g,'').substring(0,6))
					let endTime = parseInt(end.substring(8,14))
					if(nowTime < endTime){return '进行中'}
					else{return '已结束'}
				}else{
					return '进行中'
				}
			},
			clearObj(obj){
				Object.keys(obj).forEach((key) => {
					obj[key] = ''
				})
			},
			seeDetail(item){
				//console.log(item)
				this.openDetail = true
				this.detailLoading = true
				this.$refs.activityDetail.open('activityDetail')
				
				uni.request({
					url:`http://162.14.102.246:8090/activity/front/${item.id}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log(res)
					if(res.data.code == 200){
						let data = res.data.data.activity
						this.activityDetail.id = item.id,
						this.activityDetail.summary = data.activitySummary
						this.activityDetail.title = data.activityTitle
						//手机不能用replaceAll,要替换多个字符应该用正则表达式
						if(data.start && data.end){
							let start = data.start.replace(/[\:T\-]/g,'').replace(' ','')
							let end = data.end.replace(/[\:T\-]/g,'').replace(' ','')
							this.activityDetail.status = this.compareTime(start, end, item.id)
							this.activityDetail.start = data.start.substring(5,16).replace('T',' ')
							this.activityDetail.end = data.end.substring(5,16).replace('T',' ')
						}
						this.activityDetail.scale = data.scale
						this.activityDetail.text = data.text
						this.activityDetail.cover = item.activityCover
						//this.detailLoading = false,
						this.activityDetail.createBy = data.publisher
						//console.log(this.activityDetail.start)
						setTimeout(() => {
							this.detailLoading = false
						}, 300)
						
					}else{
						setTimeout(() => {
							this.openDetail = false
							this.detailLoading = false
						}, 1600)
						
						uni.showToast({
							icon:'error',
							title: '遇到错误',
							duration:1500
						})
					}
				})
			},
			closeDetail(){
				this.openDetail = false
			},
			moveStop(){
				return;
			},
			join(id){
				if(this.joinStatus == '已满员' || this.joinStatus == '已报名'){return;}
				uni.request({
					url:`http://162.14.102.246:8090/activity/front/join/${id}`,
					method:'PUT',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				}).then(res => {
					//console.log(res)
					if(res.data.code == 200){
						this.activityDetail.join = true
						
						this.$store.state.loginUser.userOtherInfo.activities.push(this.activityDetail)
						uni.showToast({
							icon:'success',
							title:'报名成功!',
							duration:1200
						})
					}
				})
			},
			seeHome(){
				uni.request({
					url:`http://162.14.102.246:8090/user/front/homePage/${this.activityDetail.createBy.id}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/otherUserHome?info="+encodeURIComponent(JSON.stringify(res.data.data.home))
					})
				})
			},
			contact(item){
				uni.navigateTo({
					url:'/pages/components/chatPage?info='+encodeURIComponent(JSON.stringify(item.createBy))
				})
			}
		},
		computed:{
			...mapState({
				list: state => state.allActivities
			}),
			joinStatus: function() {
				if(this.activityDetail.has == this.activityDetail.scale){
					return '已满员'
				}else if(this.activityDetail.has < this.activityDetail.scale-1){
					if(!this.activityDetail.join){
						return '报名'
					}else{
						return '已报名'
					}
				}
			}
		},
		mounted() {
			this.getMore()
			//console.log(this.list)
		},
		watch:{
			choose:{
				handler(newValue, oldValue){
					if(newValue == 1){
						this.pageLoading = true
						this.list.sort((obj1, obj2) => {
							return obj2.beginTime - obj1.beginTime
						})
						setTimeout(()=>{
							this.pageLoading = false
						},618)
					}else{
						this.pageLoading = true
						this.list.sort((obj1, obj2) => {
							return obj2.scale - obj1.scale
						})
						setTimeout(()=>{
							this.pageLoading = false
						},618)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kind{
		display: flex;
		flex-direction: row;
		position: absolute;
		right: 40upx;
		top: 20upx;
	}
	.best{
		margin-right: 30upx;
	}
	.pages{
		position: relative;
		padding-top: 10upx;
		overflow-y: scroll;
	}
	.activities{
		width: 93vw;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		overflow-y: scroll;
		.ever{
			margin-bottom: 10upx;
			width: calc(100%/2 - 20rpx);
			overflow: hidden;
			border-radius: 10rpx;
			box-shadow: 2upx 4upx 14upx rgba(216, 216, 216, 0.5);
			.image{
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}
			.status{
				position: relative;
				width: 90upx;
				height: 50upx;
				right: 108upx;
				background-color: rgba(249, 249, 249, 0.9);
				border: 2upx solid black;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 0.65rem;
				font-weight: bold;
			}
		}
	}
	.card1{
		height: 450upx;
	}
	.card2{
		height: 490upx;
	}
	.move2{
		position: relative;
		top: -30upx;
	}
	.move1{
		margin-top: 10upx;
	}
	.activityInfo{
		position: relative;
		height: 200upx;
		width: 100%;
		backdrop-filter: blur(5upx);
		background-image: linear-gradient(to top, rgba(71, 71, 71, 1),  rgba(71, 71, 71, 0.6),rgba(116, 116, 116, 0));
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.title{
			position: relative;
			color: white;
			top: 55upx;
			font-weight: bold;
			font-size: 26upx;
			margin: 0 auto;
			height: 100upx;
			width: 92%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			word-wrap: break-all;
			word-break: normal;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
		}
		.timeRange{
			position: relative;
			font-size: 24upx;
			color: #9fd2f9;
		}
	}
	.provider{
		position: relative;
		display: flex;
		flex-direction: row;
		top: -150upx;
		.nickname{
			margin-left: 12upx;
			color: rgba(249, 249, 249, 0.8);
			font-size: 0.8rem;
			font-weight: bolder;
			margin-top: 5upx;
		}
	}
	.seeMore{
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		margin-top: 20upx;
	}
	.activityDetail{
		background-color: white;
		overflow-y: scroll;
		padding: 20upx 20upx 20upx 20upx;
		position: relative;
		top: -30upx;
	}
	.header{
		position: relative;
		height: 70upx;
		width: 100%;
		letter-spacing: 10upx;
		color: black;
		font-size: 1.2rem;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 10upx;
		padding-bottom: 10upx;
		border-bottom: 5upx solid darkgrey;
	}
	.createBy{
		margin-top: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		.name{
			margin-left: 10upx;
		}
	}
	.introduce{
		display: flex;
		flex-direction: column;
		padding-top: 30upx;
		padding-bottom: 10upx;
		border-bottom: 1upx solid rgba(234, 234, 234, 0.5);
	}
	.care{
		margin-top: 40upx;
		margin-left: 3upx;
		position: relative;
		top: 20upx;
	}
	.footer{
		position: absolute;
		width: 100%;
		right: 0;
		height: 50px;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		letter-spacing: 2upx;
		font-weight: bold;
	}
	.join, .contact{
		width: 50%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1upx solid rgba(19,72,87,0.1);
	}
	.scale{
		position: absolute;
		font-size: 0.8rem;
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		color: white;
	}

</style>